<template>
  <div id="pwd">
    <div>
      <p class="low_text">在线密码生成器</p>
      <h1 class="title_text">快速生成安全的密码</h1>
      <p class="title2_text">这里可以创建一个无规律可寻的、足够长度的密码，再也不用对着键盘一顿乱敲了！</p>
      <div class="show_box">
        <input id="show_pwd" class="pwd_in" type="text" v-model="showPwd">
        <span >
            <i class="iconfont show_icon iconfuzhi1" @click="copyPwd"></i> <i class="iconfont show_icon iconshuaxin" @click="create_pwd()"></i>
          </span>
      </div>
      <div class="settings_box clearfix">
        <p class="settings_title">自定义您的密码</p>
        <div class="setting_left">
          <p class="pwd_length_label" >密码长度</p>
          <input class="pwd_length" type="input" v-model="ps_length"/>
          <div id="range_base_line" class="range_div">
            <div class="range_line" :style="line_per"></div>
            <button class="range_but" :style="but_per" @mousedown="butButtonDown"></button>
          </div>
        </div>
        <div class="setting_right">
          <div class="setting_right">
            <div class="clearfix">
              <div class="setting_right setting_radio">
                <label class="radio-label" for="radio_1">
                  <input name="pwd_style" class="radio_but" type="radio" id="radio_1" v-model="radio_checked" @change="radio_change"  value="easy"/>
                  <span class="demo--radioInput"></span>容易阅读</label>
              </div>
              <div class="setting_right setting_info"  @mouseenter="i_mouse_enter" @mouseleave="i_mouse_leave">
                <i class="iconfont icontanhao"></i>
                <span class="help_info" style="display: none;">避免使用相似符号，如I、l、1和b、d、j、g等</span>
              </div>
            </div>
            <div class="clearfix">
              <div class="setting_right setting_radio">
                <label class="radio-label" for="radio_2">
                  <input name="pwd_style" class="radio_but" type="radio" id="radio_2"  v-model="radio_checked" @change="radio_change"  value="nc"/>
                  <span class="demo--radioInput"></span>数字字母</label>
              </div>
              <div class="setting_right setting_info"  @mouseenter="i_mouse_enter" @mouseleave="i_mouse_leave">
                <i class="iconfont icontanhao"></i>
                <span class="help_info" style="display: none;">不包含特殊符号</span>
              </div>
            </div>
            <div class="clearfix">
              <div class="setting_right setting_radio">
                <label class="radio-label" for="radio_3">
                  <input name="pwd_style" class="radio_but" type="radio" id="radio_3" v-model="radio_checked" @change="radio_change" value="all"/>
                  <span class="demo--radioInput"></span>全部符号</label>
              </div>
              <div class="setting_right setting_info"  @mouseenter="i_mouse_enter" @mouseleave="i_mouse_leave">
                <i class="iconfont icontanhao"></i>
                <span class="help_info" style="display: none;">包含特殊符号</span>
              </div>
            </div>
          </div>
          <div class="setting_right setting_checkbox">
            <div class="clearfix">
              <div class="setting_right setting_radio">
                <label class="radio-label" for="checkbox_1">
                  <input name="word_arrary" class="radio_but" type="checkbox" id="checkbox_1" v-model="checked_checked" @change="checked_change" value="bc"/>
                  <span class="demo--checkbox demo--radioInput"></span>大写字母</label>
              </div>
            </div>
            <div class="clearfix">
              <div class="setting_right setting_radio">
                <label class="radio-label" for="checkbox_2">
                  <input name="word_arrary" class="radio_but" type="checkbox" id="checkbox_2" v-model="checked_checked" @change="checked_change" value="sc"/>
                  <span class="demo--checkbox demo--radioInput"></span>小写字母</label>
              </div>
            </div>
            <div class="clearfix">
              <div class="setting_right setting_radio">
                <label class="radio-label" for="checkbox_3">
                  <input name="word_arrary" class="radio_but" type="checkbox" id="checkbox_3" v-model="checked_checked" @change="checked_change" value="num"/>
                  <span class="demo--checkbox demo--radioInput"></span>数字</label>
              </div>
            </div>
            <div class="clearfix">
              <div class="setting_right setting_radio">
                <label class="radio-label" for="checkbox_4">
                  <input name="word_arrary" class="radio_but" type="checkbox" id="checkbox_4" v-model="checked_checked" @change="checked_change" value="sp"/>
                  <span class="demo--checkbox demo--radioInput"></span>特殊符号</label>
              </div>
              <div class="setting_right setting_info"  @mouseenter="i_mouse_enter" @mouseleave="i_mouse_leave">
                <i class="iconfont icontanhao"></i>
                <span class="help_info" style="display: none;">特殊字符为!@#$%^&*()_+-=</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="explain">
      <h4>如果你用一台双核心PC破解密码</h4>
      <h4>&emsp;&emsp;最简单的数字密码：六位（例如银行密码）瞬间搞定，八位348分钟，十位163天</h4>
      <h4>&emsp;&emsp;普通大小写字母：六位33分钟，八位62天</h4>
      <h4>&emsp;&emsp;数字＋大小写字母：六位一个半小时，八位253天</h4>
      <h4>&emsp;&emsp;数字＋大小写字母＋标点：六位22小时，八位23年</h4>
    </div>
  </div>
</template>

<script>

export default {
  name: 'pwd',
  data () {
    return {
      showPwd: '',
      line_per: '',
      but_per: '',
      submitting: 0,
      box2X: '',
      offsetx: 0,
      line_max_line: 0,
      ps_length: 8,
      radio_checked: 'all',
      checked_checked: ['sp', 'num', 'sc', 'bc']
    }
  },
  methods: {
    radio_change () {
      if (this.radio_checked === 'easy') {
        console.log('easy')
        console.log('old checked_checked:' + this.checked_checked)
        this.checked_checked = ['num', 'sc', 'bc']
        console.log('new checked_checked:' + this.checked_checked)
      } else if (this.radio_checked === 'nc') {
        console.log('nc')
        console.log('old checked_checked:' + this.checked_checked)
        this.checked_checked = ['num', 'sc', 'bc']
        console.log('new checked_checked:' + this.checked_checked)
      } else if (this.radio_checked === 'all') {
        console.log('all')
        console.log('old checked_checked:' + this.checked_checked)
        // this.radio_checked === 'all'
        this.checked_checked = ['sp', 'num', 'sc', 'bc']
        console.log('new checked_checked:' + this.checked_checked)
      }
      this.create_pwd()
    },
    checked_change () {
      this.radio_checked = ''
      this.create_pwd()
    },
    create_pwd () {
      let pwd = ''
      let numbers = '0123456789'
      let lower = 'abcdefghijklmnopqrstuvwxyz'
      let upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
      let others = '~!@#$%^&*()_'
      let pwdLen = this.ps_length
      let bucket = ''
      let item = new Array(pwdLen) // 存放密码的类型 数字（1），小写（2），大写（3），特殊字符（4）
      for (let i = 0; i < pwdLen; i++) {
        item[i] = 0
      }
      if (this.radio_checked === 'easy') {
        // console.log('easy')
        let noEasyRegexp = /(0|o|O|l|1|b|B|d|D|I|g|G|j|J|c|C|z|Z)/g
        numbers = numbers.replace(noEasyRegexp, '')
        lower = lower.replace(noEasyRegexp, '')
        upper = upper.replace(noEasyRegexp, '')
        bucket = numbers + lower + upper
        // console.log('bucket:' + bucket)
        item[0] = 1
        item[1] = 2
        item[2] = 3
        item[3] = parseInt(Math.random() * 3 + 1)
      } else if (this.radio_checked === 'nc') {
        // console.log('nc')
        bucket = numbers + lower + upper
        item[0] = 1
        item[1] = 2
        item[2] = 3
        item[3] = parseInt(Math.random() * 3 + 1)
      } else if (this.radio_checked === 'all') {
        // console.log('all')
        bucket = numbers + lower + upper + others
        item[0] = 1
        item[1] = 2
        item[2] = 3
        item[3] = 4
      } else if (this.radio_checked === '') {
        for (let i = 0; i < this.checked_checked.length; i++) {
          // 'sp', 'num', 'sc', 'bc']
          //  数字（1），小写（2），大写（3），特殊字符（4）
          if (this.checked_checked[i] === 'num') {
            bucket += numbers
            item[0] = 1
          } else if (this.checked_checked[i] === 'sc') {
            bucket += lower
            item[1] = 2
          } else if (this.checked_checked[i] === 'bc') {
            bucket += upper
            item[2] = 3
          } else if (this.checked_checked[i] === 'sp') {
            bucket += others
            item[3] = 4
          }
        }
      }
      for (let i = 4; i < pwdLen; i++) {
        item[i] = 0 // 其余部位填充0
        // item[i] += parseInt(Math.random() * 4 + 1) // 其余部分随机生成1-4的数字。
      }
      // 打乱次序，重新排序，否则密码第四位永远是特殊符号。
      item.sort(function () { return 0.5 - Math.random() }) // 返回0 两个数位置不变；小于0 就交换位置；大于0就不交换位置

      for (let j = 0; j < pwdLen; j++) {
        if (item[j] === 1) {
          pwd += numbers.charAt(Math.random() * (numbers.length - 1) + 1)
        } else if (item[j] === 2) {
          pwd += lower.charAt(Math.random() * (lower.length - 1) + 1)
        } else if (item[j] === 3) {
          pwd += upper.charAt(Math.random() * (upper.length - 1) + 1)
        } else if (item[j] === 4) {
          pwd += others.charAt(Math.random() * (others.length - 1) + 1)
        } else if (item[j] === 0) {
          pwd += bucket.charAt(Math.random() * (bucket.length - 1) + 1)
        }
      }
      this.showPwd = pwd
    },
    i_mouse_enter (e) {
      let i = e.target
      i.children[1].setAttribute('style', 'display: inline;')
    },
    i_mouse_leave (e) {
      let i = e.target
      i.children[1].setAttribute('style', 'display: none;')
    },
    box2Start (e) {
      this.box2X = e.clientX - this.offsetx
      this.line_max_line = document.getElementById('range_base_line').offsetWidth
    },
    box2Move (e) {
      let nx = e.clientX
      // 移动距离
      this.offsetx = Math.min((nx - this.box2X) > 0 ? nx - this.box2X : 0, this.line_max_line)
      // 圆点
      this.but_per = 'transform: translateX(' + this.offsetx + 'px);'
      // 进度条
      this.line_per = 'width: ' + this.offsetx + 'px;'
      // 密码长度
      this.ps_length = parseInt(((50 - 4) / this.line_max_line) * this.offsetx + 4)
    },
    box2End (e) {
      window.removeEventListener('mousemove', this.box2Move)
      window.removeEventListener('mouseup', this.box2End)
    },
    butButtonDown (e) {
      // console.log(e)
      this.box2Start(e)
      window.addEventListener('mousemove', this.box2Move)
      window.addEventListener('mouseup', this.box2End)
    },
    input_change (newVlue) {
      this.line_max_line = document.getElementById('range_base_line').offsetWidth
      this.offsetx = this.line_max_line / 50 * parseInt((newVlue > 0 ? newVlue : 0) % 50)
      // 圆点
      this.but_per = 'transform: translateX(' + this.offsetx + 'px);'
      // 进度条
      this.line_per = 'width: ' + this.offsetx + 'px;'
      // console.log('line_max_line;' + this.line_max_line + ',this.offsetx:' + this.offsetx + ',newVlue:' + newVlue)
    },
    copyPwd () {
      let targetPwd = document.getElementById('show_pwd')
      if (targetPwd.value === '') {
        alert('还未生成密码')
        return false
      }
      targetPwd.select()
      document.execCommand('Copy')
      alert('密码已成功复制')
    }
  },
  mounted () {
    console.log('run created')
    this.input_change(this.ps_length)
    this.create_pwd()
  },
  watch: {
    // 生成密码
    ps_length: function (newValue, oldValue) {
      this.input_change(newValue)
      this.create_pwd()
    }
  }

}

</script>

<style scoped>
  #pwd {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  .low_text{
    color: #8c8c8c;
  }
  .title_text{
    color: crimson;
  }
  .settings_box{
    font-size: 18px;
    width: 50%;
    padding: 40px 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top:30px;
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.12), 0 6px 20px 0 rgba(0,0,0,.14);
  }
  .show_box{
    width: 50%;
    padding: 0px 30px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.12), 0 6px 20px 0 rgba(0,0,0,.14);
  }
  .pwd_in {
    width: 80%;
    background: #FFF;
    border: 0px none transparent;
    outline:none;
    height: 40px;
    line-height: 40px;
    padding: 0px 10px;
    text-align: left;
    font-size: 30px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .show_icon{
    font-size: 30px;
  }
  .settings_title{
    text-align: left;
    font-size: 20px;
    border-bottom: 2px solid #5f9ea0;
    width: 100%;
    margin-bottom: 26px;
  }
  .setting_left{
    display: inline;
    float: left;
    width: 50%;
  }
  .pwd_length_label{
    text-align: left;
  }
  .pwd_length{
    float: left;
    font-size: 20px;
    max-width: 10%;
    margin-right: 20px;
    padding: 8px;
    border: 1px solid #c8c8c8;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.25);
    outline:none;
    text-align:center;
  }
  .range_div {
    display: inline;
    float: left;
    position: relative;
    width: 70%;
    height: 8px;
    margin-top: 13px;
    border-radius: 5px;
    background-color: #eaeaea;
  }
  .range_line{
    max-width: 100%;
    width: 1px;
    height: 8px;
    border-radius: 5px;
    background-color: #d32d27;
  }
  .range_but{
    position: absolute;
    top: -13px;
    left: -16px;
    z-index: 1;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 16px;
    background-color: #d32d27;
    outline:none;
  }
  .setting_right{
    display: inline;
    float: left;
    width: 50%;
  }
  .setting_radio{
    text-align: left;
    width: 60%;
    margin-bottom: 10px;
  }
  .setting_info{
    text-align: left;
    position: relative;
    max-width: 20px;
  }
  .help_info{
    position: absolute;
    top: -8px;
    left: 125%;
    z-index: 10;
    width: 150px;
    height: auto;
    padding: 10px;
    border: solid 1px #d6dbdb;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px 0 rgba(0,0,0,0.25);
    box-shadow: 0 6px 12px 0 rgba(0,0,0,0.25);
    margin: 0;
    color: #333f48;
    font-size: .77778rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    font-family: 'gibson-regular', Arial, sans-serif;
  }
  .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
  .radio_but{
    display:none
  }
  .demo--radioInput {
    background-color:#fff;
    border:1px solid rgba(0,0,0,0.15);
    border-radius:100%;
    display:inline-block;
    height:16px;
    margin-right:10px;
    margin-top:-1px;
    vertical-align:middle;
    width:16px;
    line-height:1
  }
  .radio_but:checked + .demo--radioInput:after {
    background-color: #d32d27;
    border-radius:100%;
    content:"";
    display:inline-block;
    height:12px;
    margin:2px;
    width:12px
  }
  .demo--checkbox.demo--radioInput,.radio_but:checked + .demo--checkbox.demo--radioInput:after {
    border-radius:0
  }
  .explain{
    width:45%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  h4{
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .red-c{
    color:red;
  }
</style>
